<template>
  <div class='container'>
    <el-card>
      <div slot="header">
        <el-breadcrumb class="breadcrumb">
          <el-breadcrumb-item>商家名称 : {{shopData.shopName}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-row>
        <el-form class="form" label-width="100px">
          <el-col :span="8">
            <el-form-item label="商家名称">
              <el-input size="mini" placeholder="请输入商家简称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商家编号">
              <el-input type="password" size="mini"
                        placeholder="请输入商家编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button>搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div class="table-wrapper">
        <el-table
          :data="goodsList"
          style="width: 100%"
          align='center'
          :header-cell-style="{background:'#eef1f6'}"
        >
          <el-table-column
            prop="bid"
            label="商品编号"
            align='center'
            width="100">
          </el-table-column>
          <el-table-column
            prop="shopName"
            label="商品名称"
            align='center'
          >
          </el-table-column>
          <el-table-column
            label="商品类型"
            align='center'
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 0">优惠</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="info"
            label="商品描述"
            align='center'
            width="150"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="originalPrice"
            label="原价"
            align='center'
            width="120">
          </el-table-column>
          <el-table-column
            prop="price"
            label="售价"
            align='center'
            width="120">
          </el-table-column>
          <el-table-column
            prop="serviceTel"
            label="联系电话"
            align='center'
            width="120">
          </el-table-column>
          <el-table-column
            prop="scale"
            label="分配比例"
            align='center'
            width="80">
          </el-table-column>
          <el-table-column
            label="状态"
            align='center'
            width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">待审核</span>
              <span v-if="scope.row.status == 1">发布中</span>
              <span v-if="scope.row.status == 2">已下架</span>
            </template>
          </el-table-column>
          <el-table-column
            align='center'
            label="操作"
            width="180">
            <template slot-scope='scope'>
              <el-col>
                <el-button
                  type="text"
                  size="mini"
                  @click="getGoodsFunc(scope.row)"
                >
                  查看商品
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="getGoodsFunc(scope.row,3,scope.$index)"
                >
                  删除
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  v-if="scope.row.status == 2"
                  @click="getGoodsFunc(scope.row,0)"
                >
                  上架
                </el-button>
              </el-col>
              <el-col>
                <el-button
                  type="text"
                  size="mini"
                  v-if="scope.row.status == 1"
                  @click="getGoodsFunc(scope.row,2)"
                >
                  下架
                </el-button>

                <el-button
                  type="text"
                  size="mini"
                  v-if="scope.row.status == 0"
                  @click="getGoodsFunc(scope.row,2)"
                >
                  审核驳回
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  v-if="scope.row.status == 0"
                  @click="getGoodsFunc(scope.row,1)"
                >
                  审核通过
                </el-button>
              </el-col>
            </template>
          </el-table-column>
        </el-table>

        <!-- 删除提示框 -->

        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center :modal-append-to-body="false">
          <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="delVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteRow(goodsFuncParams.index)">确 定</el-button>
          </div>
        </el-dialog>


        <!--        <div class="table-footer">-->
        <!--          <el-row>-->
        <!--            <el-col>-->
        <!--              <el-button size="small">下架</el-button>-->
        <!--              <el-button @click="" size="small">审核驳回</el-button>-->
        <!--              <el-button @click="" size="small">审核通过</el-button>-->
        <!--              <el-button @click="" size="small">删除商品</el-button>-->
        <!--            </el-col>-->
        <!--          </el-row>-->
        <!--        </div>-->
      </div>
      <div class="pagination">
        <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                    @handleSizeChange="handleSizeChange"></pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import { businessGoodsList, goodsFunction } from '../../api/api'

export default {
  data () {
    return {
      delVisible: false,
      delarr: [], // 存放删除的数据
      shopData: {
        mobile: '',
        shopName: '',
        classifyId: '',
        shopCode: '',
        userId: sessionStorage.getItem('userId')
      },
      goodsParams: {
        shopId: '',
        pageSize: 10,
        pageNum: 1
      },
      goodsFuncParams: {
        index: 0,
        id: '',
        type: ''
      },
      goodsList: [],
      pageTotal: 0
    }
  },
  mounted () {
    if (this.$route.params.formData) {
      this.shopData = this.$route.params.formData
      this.goodsParams.shopId = this.$route.params.formData.shopId
    } else {
      this.formData.businessName = ''
    }
    this.getGoodsList()
  },
  methods: {
    getGoodsList () {
      const para = Object.assign({}, this.goodsParams)
      businessGoodsList(para).then(res => {
        console.log(res.data.list)
        this.goodsList = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.goodsParams.pageNum = val
      this.getGoodsList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.goodsParams.pageSize = val
      this.getGoodsList()
    },
    getGoodsFunc (row, type, index) {
      this.goodsFuncParams.id = row.id
      this.goodsFuncParams.type = type
      this.goodsFuncParams.index = index
      if (type === 3) {
        this.delVisible = true
      } else {
        this.GoodsFunction()
      }
    },
    GoodsFunction () {
      const para = Object.assign({}, this.goodsFuncParams)
      goodsFunction(para).then(res => {
        console.log(res)
        this.getGoodsList()
      })
    },
    deleteRow (index) {
      this.GoodsFunction()
      console.log(index)
      this.goodsList.splice(index, 1)
      this.delVisible = false
    }
  },
  components: {
    pagination
  }
}
</script>
<style lang="scss" scoped>

</style>
